<script setup lang="tsx">
  import { formConfig, columns, initData } from './data';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import Modal from './components/modal.vue';
  import ScoreModal from './components/scoreModal.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { planPageApi, planDeleteApi, planUpdateApi } from '@/api/jiankang/plan';
  import { getAuthCache } from '@/utils/auth';
  import { USER_INFO_KEY } from '@/enums/cacheEnum';

  const userInfo: any = getAuthCache(USER_INFO_KEY);
  const data = initData();
  const { createMessage } = useMessage();
  const [registerModal, { openModal }] = useModal();
  const [registerScoreModal, { openModal: openScoreModal }] = useModal();

  // 设置table
  const [registerTable, { reload }] = useTable({
    api: planPageApi, //请求api
    title: '查询结果',
    // dataSource: data, //mock数据
    columns: columns, //表头配置
    bordered: true,
    useSearchForm: true, //开启搜索区域
    formConfig: formConfig, //搜索字段配置
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
    },
    rowSelection: {
      type: 'checkbox',
    },
    pagination: { pageSize: 10 },
    showTableSetting: true, // 显示表格设置
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    indexColumnProps: { fixed: 'left' },
  });

  const add = () => {
    openModal(true, {
      type: 'add',
    });
  };
  const handleView = ({ data }) => {
    openModal(true, {
      type: 'view',
      data,
    });
  };
  const handleEdit = ({ data }) => {
    openModal(true, {
      type: 'edit',
      data,
    });
  };
  const handleDel = async (data) => {
    await planDeleteApi({ idList: data.id });
    createMessage.success('删除成功');
    reload();
  };

  /**
   * 收藏--关联用户
   */
  const handleFavorite = async ({ data }) => {
    if (data.uid === userInfo.id) {
      const params = Object.assign({}, data, { uid: '-1' });
      console.log(params);
      await planUpdateApi(params);
      createMessage.success('取消收藏成功');
      reload();
    } else {
      const params = Object.assign({}, data, { uid: userInfo.id });
      console.log(params);
      await planUpdateApi(params);
      createMessage.success('收藏成功');
      reload();
    }
  };

  /**
   * 评论
   */
  const handleComment = ({ data }) => {
    openScoreModal(true, {
      data,
    });
  };
</script>

<template>
  <div class="publish">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                tooltip: '查看',
                icon: 'clarity:info-standard-line',
                onClick: handleView.bind(null, { data: record }),
              },
              {
                tooltip: '收藏',
                icon: `${record.uid === userInfo.id ? 'material-symbols:favorite' : 'material-symbols:favorite-outline'}`,
                ifShow: userInfo.type === 'user',
                onClick: handleFavorite.bind(null, { data: record }),
              },
              {
                tooltip: '评论',
                icon: 'material-symbols:comment-bank-outline',
                ifShow: userInfo.type === 'user',
                onClick: handleComment.bind(null, { data: record }),
              },
              {
                tooltip: '编辑',
                icon: 'clarity:note-edit-line',
                ifShow: userInfo.type === 'jl',
                onClick: handleEdit.bind(null, { data: record }),
              },
              {
                tooltip: '删除',
                color: 'error',
                icon: 'ant-design:delete-outlined',
                ifShow: userInfo.type === 'jl',
                popConfirm: {
                  title: '是否确定删除？',
                  confirm: handleDel.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>

      <template #toolbar>
        <a-button
          v-if="userInfo.type === 'jl'"
          type="primary"
          preIcon="material-symbols:add"
          @click="add"
          >发布计划</a-button
        >
      </template>
    </BasicTable>
    <Modal @reload="reload" @register="registerModal" />
    <ScoreModal @register="registerScoreModal" />
  </div>
</template>

<style lang="less" scoped></style>
